<template>
  <div class="city">
    <my-header>
       <template #left>
          返回
       </template>
       <template #center>
          {{cityName}}
       </template>
       <template #right>
         <span style="font-size:12px">切换城市</span>
       </template>
    </my-header>
    <my-input v-model="searchVal" @submit="submit"></my-input>
    <ul class="count">
      <li v-for="(item,index) in list" :key="index" @click="$router.push(`/home/index?geohash=${item.geohash}`)">
        <p>{{item.name}}</p>
        <p>{{item.address}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import myHeader from '../components/myHeader.vue';
import MyInput from '../components/myInput.vue';
import { reactive,toRefs } from 'vue';
import api from '../api/request';
export default {
  components: { myHeader, MyInput },
  setup() {
    const data = reactive({
      cityName: '',
      searchVal: '', // 搜索框输入的值
      list:[], // 商圈的展示
    })
    api.get('v1/cities/32').then(res => {
      data.cityName = res.name;
    })
    const submit = () => {
       api.get(`/v1/pois?type=search&city_id=32&keyword=${data.searchVal}`).then(res => {
         data.list = res;
       })
    }
    return {
      ...toRefs(data),
      submit
    }
  }
}
</script>
<style lang="scss" scoped>
  .city{
    height: 100%;
  }
  .count{
    height: calc(100% - 146px);
    overflow: auto;
    li{
      border-bottom: 1px solid #ccc;
      padding: 0 15px;
      p{
        line-height: 30px;
      }
      p:last-child{
        font-size: 12px;
        color: #999;
      }
    }
  }
</style>